// openlayersdemo
<template>
  <div class="h-100">
    <div :id="mapId" class="map"></div>
    <button id="zoom-out">缩小</button>
    <button id="zoom-in">放大</button>
  </div>
</template>
<script>
import Map from "ol/Map";
import OSM from "ol/source/OSM";
import { Tile as TileLayer, Vector as VectorLayer } from "ol/layer";
import { XYZ as XYZSource, Vector as VectorSource } from "ol/source";
import { ScaleLine, FullScreen } from "ol/control";
import { Feature } from "ol";
import { LineString, Point } from "ol/geom";
import { transform, fromLonLat } from "ol/proj";
import { Circle, Fill, Stroke, Style, Text } from "ol/style";
import { WKT } from "ol/format";
import { fromExtent } from "ol/geom/Polygon";
import TileGrid from "ol/tilegrid/TileGrid";
import View from "ol/View";
import { OverviewMap } from 'ol/control'
import { Common } from "cby.assist";
import areaShape from "./data/areaShape.js";
export default {
  data() {
    return {
      mapId: Common.uuid(),
      map: null,
    };
  },
  mounted() {
    this.initMap();
  },
  methods: {
    initMap() {
      this.map = new Map({
        layers: [
          new TileLayer({
            source: new XYZSource({
              url: "http://webrd0{1-4}.is.autonavi.com/appmaptile?x={x}&y={y}&z={z}&style=8&lang=zh_cn&size=1&scale=1",
            }),
          }),
        ],
        target: this.mapId,
        view: new View({
          center: [12957563, 4851607],
          zoom: 8,
        }),
        controls: [new ScaleLine(), new FullScreen()],
      });
      document.getElementById("zoom-out").onclick = () => {
        const view = this.map.getView();
        const zoom = view.getZoom();
        view.setZoom(zoom - 1);
      };

      document.getElementById("zoom-in").onclick = () => {
        const view = this.map.getView();
        const zoom = view.getZoom();
        view.setZoom(zoom + 1);
      };
      this.addFeaturePoint()
      this.addLayer()
    },
    addLayer() {
      this.offlineLayer = this.creatLayerMap({ zIndex: 2 });
      this.offlineOverviewLayer = this.creatLayerMap({ zIndex: 2 }, null, true)
      this.getOfflineData();
    },
    addFeaturePoint() {
      const featurePoint = new Feature({
        geometry: new Point(
          transform([116.38, 39.9], "EPSG:4326", "EPSG:3857")
        ),
      });
      featurePoint.setStyle(
        new Style({
          image: new Circle({
            fill: new Fill({
              color: "red",
            }),
            radius: 4,
          }),
        })
      );
      this.map.addLayer(
        new VectorLayer({
          source: new VectorSource({
            features: [featurePoint],
          }),
          style: (feature) => {
            return new Style({
              image: new Circle({
                fill: new Fill({
                  color: "red",
                }),
                radius: 4,
              }),
            });
          },
        })
      );
    },
    creatLayerMap(option = {}, source, isOverview = false) {
      source = source || new VectorSource();
      const layer = new VectorLayer({
        source: source,
        ...option,
      });
      !isOverview && this.map.addLayer(layer);
      return layer;
    },
    offlineStyle(areaId) {
      return new Style({
        fill: new Fill({
          color: "rgba(255, 255, 255, 0.4)",
        }),
        stroke: new Stroke({
          color: "#FF0000",
          width: 1,
        }),
        text: new Text({
          font: "12px serif",
          text: `地区编码-${areaId}`,
          fill: new Fill({
            color: "blue",
          }),
        }),
      });
    },
    // 获取离线地图数据
    getOfflineData() {
      const format = new WKT();
      const extent = this.map.getView().calculateExtent(this.map.getSize());
      const Rectangle = new Feature({
        geometry: fromExtent(extent),
      });
      const mapExtent = format.writeFeature(Rectangle, {
        dataProjection: "EPSG:4326",
        featureProjection: "EPSG:3857",
      });
      // AreaShapeApi.spatialQuery({
      //   extent: mapExtent,
      //   level: this.level
      // }).then(res => {
      //   if (!res) return
      this.offlineLayer.getSource().clear();
      this.offlineOverviewLayer.getSource().clear()
      areaShape.forEach((i) => {
        const feature = format.readFeature(i.shape, {
          dataProjection: "EPSG:4326",
          featureProjection: "EPSG:3857",
        });
        console.log(i.shape);
        feature.setStyle(this.offlineStyle(i.areaId));
        this.offlineLayer.getSource().addFeature(feature);
        this.offlineOverviewLayer.getSource().addFeature(feature)
      });
      this.setOverview([this.offlineOverviewLayer])
      // })
    },
    // 添加鹰眼
    setOverview(layers) {
      const overviewMapControl = new OverviewMap({
        className: 'ol-overviewmap ol-custom-overviewmap',
        layers: layers,
        collapsed: false
      })
      this.map.addControl(overviewMapControl)
    }
  },
};
</script>
<style scoped>
.map {
  width: 100%;
  height: calc(100% - 20px);
}
</style>
